<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=width-device,initial-scale=1.0" />
		<title>增加商品</title>
		<link rel="stylesheet" type="text/css" href="js/bootstrap/css/bootstrap.css" />

		<script type="text/javascript" src="js/jquery.js"></script>
		<script type="text/javascript" src="js/global.js"></script>
		<script type="text/javascript" src="js/bootstrap/js/bootstrap.js"></script>
		<script src="js/layer/layer.js"></script>
	</head>

	<body>
		<div class="container">
			<form id="form1" class="form-horizontal" enctype="multipart/form-data">
				<div class="form-group">
					<label for="" class="col-sm-2">选择图片</label>
					<div class="col-sm-8">
						<input type="file" id="gpic" name="gpic" placeholder="请选择图片" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">商品名</label>
					<div class="col-sm-8">
						<input type="text" id="gname" name="gname" placeholder="请输入商品名" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">描述</label>
					<div class="col-sm-8">
						<input type="text" id="gdesc" name="gdesc" placeholder="请添加商品描述" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">单价</label>
					<div class="col-sm-8">
						<input type="text" id="gprice" name="gprice" placeholder="请输入商品价格" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">产地</label>
					<div class="col-sm-8">
						<input type="text" id="gplace" name="gplace" placeholder="产地" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<label for="" class="col-sm-2">数量</label>
					<div class="col-sm-8">
						<input type="text" id="gcount" name="gcount" placeholder="请输入商品数量" class="form-control" />
					</div>
				</div>
				<div class="form-group">
					<div class="col-sm-offset-2 col-sm-8">
						<input type="button" value="增加商品" class="btn btn-success" id="addBtn" />
						<input type="button" value="取消" class="btn btn-warning" onclick="window.parent.layer.closeAll();" />
					</div>
				</div>
				<!--进度条-->
				<div class="form-group">
					<div class="progress" id="progress" style="display: none;">
						<div id="son" class="progress-bar progress-bar-success progress-bar-striped active" style="width: 0%;">
							0%
						</div>
					</div>
				</div>

				<!-- 预览图片  -->
				<img  id="previewImg" class="img-responsive" style="width:300px;height:100px;" />
			</form>
		</div>

		<script>
			$(function() {

				$('#gpic').change(function(e) {
					var file = this.files[0];
					//判断文件是否是图片
					if (file.type.match(/image/) == null) {
						layer.msg('请选择图片文件');
						this.value = '';
						return false;
					}
					//判断图片大小，图片不允许超过1M
					if (file.size > 1 * 1024 * 1024) {
						layer.msg('图片过大不允许超过1M');
						this.value = '';
						return false;
					}

					//获得文件读取对象
					var fr = new FileReader;
					//读取文件内容
					fr.readAsDataURL(file);

					//异步读取文件
					fr.onload = function() {
						
						//显示图片
						$('#previewImg').attr('src', this.result);
					}

				});
				/*验证表单函数*/
				function checkForm() {
					var files = $('#gpic').get(0).files;

					if (files.length == 0) {
						layer.msg('请选择上传的图片');
						$('#gpic').focus();
						return false;
					}
					//文件描述验证
					var gdesc = $('#gdesc');
					if (gdesc.val() == '' || gdesc.val().length > 20) {
						layer.msg('图片描述不恩能够为空 并且最多20个字符');
						$('#gdesc').focus();
						return false;
					}
					return true;
				}

				//上传按钮的单击事件
				$('#addBtn').click(function() {
					if (!checkForm()) {
						return;
					}
					//显示上传的进度条
					$('.progress').show();
					//发送ajax请求
					//文件对象
					var file = $('#gpic').get(0).files[0];

					
					// 创建FormData对象（表单数据）
					var formData = new FormData();

					// 添加数据字段到FormData
					formData.append('gpic', file);
					// 添加数据字段到FormData
					formData.append('gname', $('#gname').val());
					formData.append('gdesc', $('#gdesc').val());
					formData.append('gprice', $('#gprice').val());
					formData.append('gcount', $('#gcount').val());
					formData.append('gplace', $('#gplace').val());
				

					//异步请求
					$.ajax({
							url: baseUrl +'/goods/add',
							type: 'POST',
							data: formData,
							processData: false, //一定设置false
							contentType: false, //一定设置false
							//这里我们先拿到jQuery产生的 XMLHttpRequest对象，为其增加 progress 事件绑定，然后再返回交给ajax使用
							　　　xhr: function() {　　　　　　
								var xhr = $.ajaxSettings.xhr();

								if (onprogress && xhr.upload) {　　　　　　　　
									xhr.upload.addEventListener("progress", onprogress, false);　　　　　　　　
									return xhr;　　　　　　
								}　　　
							}
						})
						.done(function() {
							layer.msg('增加商品成功');
							window.parent.layer.closeAll();
						})
						.fail(function(xhr) {
							layer.msg('请求失败'+xhr);
						});

					/**
					 * 侦查附件上传情况 ,这个方法大概0.05-0.1秒执行一次
					 */
					function onprogress(evt) {
						var loaded = evt.loaded; //已经上传大小情况 
						var tot = evt.total; //附件总大小 
						var per = Math.floor(100 * loaded / tot); //已经上传的百分比 
						$("#son").html(per + "%");
						$("#son").css("width", per + "%");
					}
				});

			});
		</script>

	</body>

</html>